// pages/domnode/domnode.js
const towxImg = require('../../../utils/towxImg');
Page({
  /**
   * 页面的初始数据
   */
  data: {
    rect: {}
  },
  byid: function () {
    var that = this;
    wx.createSelectorQuery().select('#domele').boundingClientRect(function (rect) {
      /*
      * rect.id      // 节点的ID
      * rect.dataset // 节点的dataset
      * rect.left    // 节点的左边界坐标
      * rect.right   // 节点的右边界坐标
      * rect.top     // 节点的上边界坐标
      * rect.bottom  // 节点的下边界坐标
      * rect.width   // 节点的宽度
      * rect.height  // 节点的高度
      */
      console.log(rect)
      that.setData({ rect: rect })
    }).exec()
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    let code = '```\n<view>\n  <button style="color:red;" id="domele" bindtap="byid">点击获取节点属性</button>\n  <view>节点属性：</view>\n  <view>节点的ID: {{rect.id }}</view>\n  <view>节点的dataset: {{rect.dataset}}</view>\n  <view>节点的左边界坐标: {{rect.left}}</view>\n  <view>节点的右边界坐标: {{rect.right}}</view>\n  <view>节点的上边界坐标: {{rect.top}}</view>\n  <view>节点的下边界坐标: {{rect.bottom}}</view>\n  <view>节点的宽度: {{rect.width}}</view>\n  <view>节点的高度: {{rect.height}}</view>\n</view>\n\nbyid:function(){\n  var that=this;\n  wx.createSelectorQuery().select("#domele").boundingClientRect(function (rect) {\n    /*\n    * rect.id      // 节点的ID\n    * rect.dataset // 节点的dataset\n    * rect.left    // 节点的左边界坐标\n    * rect.right   // 节点的右边界坐标\n    * rect.top     // 节点的上边界坐标\n    * rect.bottom  // 节点的下边界坐标\n    * rect.width   // 节点的宽度\n    * rect.height  // 节点的高度\n    */\n    console.log(rect)\n    that.setData({ rect: rect})\n  }).exec()\n},\n```\n\n';

    let article = towxImg.dealWithRichText(code);
    this.setData({ article });
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})